<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="form">
					<wd-form ref="formRef" :model="formData" :rules="formRules">
						<wd-input use-suffix-slot v-model="formData.title" clearable prop="title"
							custom-class="wd-input-custom-class-fd-col  bg-transparent square" label="标题："
							label-width="100px" placeholder="请输入">
						</wd-input>

						<view class="form-item">
							<wd-cell required title="内容：" vertical>
								<wd-textarea v-model="formData.desc" prop="desc" placeholder="请输入" label="" />
							</wd-cell>
						</view>

					</wd-form>
				</view>
				<view class="footer" id="footer">
					<view class="btns">
						<wd-button type="success" @click="submit"
							custom-class="wd-button-custom-class-my-success  wd-button-custom-class-w100">提交</wd-button>
					</view>
				</view>
			</view>
		</wd-config-provider>
	</app-page>


</template>

<script lang="ts">
	import { defineComponent, ref, onMounted, reactive, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import useRouter from '@/hooks/useRouter.ts';


	import {
		getNotesInfo,
		doAddNotes,
		doUpdateNotes
	} from "@/api/index"
	export default defineComponent({
		name: '',
		components: {
		},
		setup(props, ctx) {
			const router = useRouter();

			// 日间light、夜间dark主题
			const theme = ref('light');
			// 表单 Ref
			const formRef = ref();
			const formFields = ref([]);
			const formRules = {

				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				desc: [{ required: true, message: '请输入内容', trigger: 'blur' }],

			};
			const formData = reactive({
				// 案件名称
				title: "",
				desc: "",
				id: null,
			});






			const submit = () => {
				formRef.value.validate().then(({ err, valid }) => { // 校验表单数据是否符合规则，符合则执行后续操作，否则不执行后续操作。
					if (!valid) {
						return false;
					}
					if (formData.id) {
						doUpdateNotes({
							...formData,
						}).then((res) => {
							uni.$wdToast.show("更新成功")
							setTimeout(() => {
								router.back({
									delta: 1,
								})
							}, 1000)
						})
					} else {
						doAddNotes({
							...formData,
						}).then(res => {
							uni.$wdToast.show("提交成功")
							setTimeout(() => {
								router.back({
									delta: 1,
								})
							}, 1000)
						});
					}


				}).catch((errors) => { // 校验不通过时，执行此操作。errors为校验不通过的字段信息。
				});

			}
			onLoad((params) => {
				if (params.id) {
					getNotesInfo({
						id: params.id
					}).then((res : any) => {
						formData.id = res.id;
						formData.title = res.title;
						formData.desc = res.desc;


					});
				}

			})
			onMounted(async () => {
			})
			return {
				theme,
				formRules,
				formData,
				formFields,
				formRef,
				submit,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #F2F2F2;
	}

	.container {
		padding: 24rpx;



		.form {
			padding-bottom: 180rpx;

			.checkbox {
				padding: 18rpx;
			}


			.form-item {
				padding: 18rpx !important;
				border-radius: 14rpx;
				overflow: hidden;

				:deep(.wd-textarea) {
					padding: 24rpx;
					border-radius: 14rpx;
				}

				:deep(.wd-input) {
					padding: 0 24rpx;
					border-radius: 14rpx;

					.wd-input__inner {
						height: 44px;
						line-height: 44px;
					}
				}

				:deep(.wd-cell) {
					background-color: transparent;
					padding-left: 0;

					.wd-cell__wrapper {
						padding-right: 0;
						padding: 0;
					}

					.wd-cell__right {
						margin-top: 20rpx;
						border-radius: 14rpx;
						overflow: hidden;
					}

					.wd-cell__wrapper.is-vertical .wd-cell__value {
						max-width: 100%;
					}

					.wd-cell__body {
						// background-color: #FFF;
						border-radius: 14rpx;
					}
				}

			}
		}

		.footer {
			position: fixed;
			bottom: 40rpx;
			margin: 0 24rpx;
			padding: 24rpx;
			width: calc(100% - 24rpx - 24rpx - 24rpx - 24rpx);
			left: 0rpx;

			min-height: 100rpx;
			border-radius: 21rpx 21rpx 0 0;

			.btn {
				padding: 30rpx 29rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
</style>